<!--禁忌词管理页面-->
<template>
<!--:header-row-style修改表头颜色,:header-cell-style修改表头背景，
textAlign:'center'内容居中 height="600"表格固定显示600px的内容-->
  <el-table :data="tabooArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{background:'#4ea0ff',textAlign:'center'}"
            :header-row-style="{color:'white'}"
            :cell-style="{textAlign:'center'}"
            height="550">
    <el-table-column type="index" label="序号" width="100px" ></el-table-column>
    <el-table-column prop="name" label="禁忌词名称" width="200px"></el-table-column>
    <el-table-column prop="categoryName" label="类别" width="200px"></el-table-column>
    <el-table-column label="状态" width="120px">
      <template #default="scope">
        <el-switch v-model="scope.row.enable"
                   :active-value="1"
                   :inactive-value="0" @change="changeStatus(scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="systemLevel" label="系统级别" width="200px"></el-table-column>
    <el-table-column prop="twctModified" label="更新时间" width="200px"></el-table-column>
<!--禁忌词修改和删除-->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button  :icon="Edit" circle @click="dialogVisible=true;edit(scope.row)"/>
        <el-button type="danger" :icon="Delete" circle  @click="del(scope.$index,scope.row)"/>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-row :gutter="10">
     <el-col :span="6"> <el-button type="warning" style="margin: 10px;" @click="dialogVisible=true"><el-icon><Plus /></el-icon>新增禁忌词</el-button></el-col>
     <el-col :span="18">
       <!--分页器
       @size-change和@current-change=>处理页码大小和当前页变动时候触发的事件,
:current-page=>当前第几页
:page-sizes=>每页显示多少条数据的选择项
:page-size=>每页显示多少条数据
layout=>页码布局(一下是完整版)
:total=>数据总数
-->
       <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
           :page-sizes="[10, 20, 50, 100]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="tabooArr.length"
       style="margin-top: 10px;">
       </el-pagination></el-col>
    </el-row>
  </div>


<!--添加禁忌词的蒙版弹窗-->
  <el-dialog v-model="dialogVisible" align-center style="padding: 60px;">
<!--优化禁忌词新增和修改页面-->
    <h1>{{taboo.id==null?'新增禁忌词':'修改禁忌词'}}</h1>
    <el-form :model="taboo" label-width="auto">
      <el-form-item label="禁忌词名称" >
        <el-input placeholder="请输入内容" v-model="taboo.name"></el-input>
      </el-form-item>
      <el-form-item label="系统级别">
        <!--disable 设置有id的时候禁用:disabled="taboo.id!=null"-->
        <el-radio-group :disabled="taboo.id!=null" v-model="taboo.systemLevel" @change="typeChange()">
          <el-radio-button v-for="c in SystemLArr" :label="c.id">{{c.systemLevel}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="taboo.categoryId"  placeholder="请选择">
          <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%;" @click="add()">{{taboo.id==null?'添加':'修改'}}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<!--需要注意禁忌词修改未设置函数，后续连接数据库之后设置箭头函数-->
<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import router from "@/router";

//新增禁忌词的蒙版弹窗是否可见
const dialogVisible=ref(false);
//删除禁忌词
const del=(i,row)=>{
  if (confirm('您确定要删除这个禁忌词吗？')){
    axios.post((BASE_URL+'/taboowords/'+row.id+'/deleteById'))
        .then((response)=>{
          if (response.data.code==2001){
            tabooArr.value.splice(i,1);
            ElMessage.success('删除成功!');
            loadData();
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }

}
//修改禁忌词
const edit = (row) =>{
  //跳转一下页面,并且附带当前的信息
  router.push('/taboowords?id='+row.id);

}

//禁忌词状态改变箭头函数
const changeStatus=(user)=>{
  let data = qs.stringify({id:user.id,enable:user.enable});
  console.log(data);
  axios.post(BASE_URL+'/taboowords/add-new',data)
      .then((response)=>{
    if (response.data.code==2001){
      ElMessage.success('修改成功！');

    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//禁忌词响应式变量
const taboo=ref({name:'',categoryId:'',systemLevel:'1',categoryName:''});

const currentPage=ref('1');
const pageSize=ref('10');

//禁忌词虚拟数组,需要id
const tabooArr=ref([]);
//系统级别数组
const SystemLArr = ref([]);
//类别数组
const categoryArr=ref([]);
//加载禁忌词数组的方法
const loadData = ()=>{
  axios.get(BASE_URL+'/taboowords/tabooAll').then((response)=>{
    if(response.data.code==2001){
      tabooArr.value=response.data.data;
    }
  })
}
onBeforeUpdate(() =>{
  //location中包含了当前url的信息
  if(location.search.includes('id')) {//修改
    let id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/taboowords/' + id + '/update')
        .then((response) => {
          if (response.data.code == 2001) {
            console.log(response.data.data);
            taboo.value = response.data.data;
            //二级分类无法正常回显
            //原因:当type为1时,没有其它一级分类下的二级分类数据
            //解决:重新请求content对象中对应type的二级分类
            //请求获取二级分类数据
            axios.get(BASE_URL + '/taboowords/categories/' + taboo.value.systemLevel + '/sub')
                .then((response) => {
                  if (response.data.code == 2001) {
                    categoryArr.value = response.data.data;
                  }
                })
          }
        })
  }
})

//*********************************一点击页面就加载*****************************************
onMounted(()=>{
  //请求首页展示的内容
  loadData();
  //蒙版弹窗请求展示一级分类的内容
  axios.get(BASE_URL+'/taboowords/categories/0/sub').then((response)=>{
    if(response.data.code==2001){
      SystemLArr.value=response.data.data;
    }
  })
  //请求展示默认二级分类
  axios.get(BASE_URL+'/taboowords/categories/1/sub')
      .then((response)=>{
        if(response.data.code==2001){
          categoryArr.value = response.data.data;
        }
      })

})






//*****************************************蒙版弹窗涉及的内容*******************************************
//当选择的系统级别发生改变时,触发此函数
const typeChange = ()=>{
  //加这个是为了防止切换一级标题时,把原来一级标题下的二级分类带过去
  taboo.value.categoryId='';
  //请求获取二级分类数据
  axios.get(BASE_URL+'/taboowords/categories/'+taboo.value.systemLevel+'/sub')
      .then((response)=>{
        if(response.data.code==2001){
          categoryArr.value = response.data.data;
        }
      })

}
//蒙版弹窗添加禁忌词
//禁忌词新增箭头函数
const add=()=>{
  //添加的时候关闭蒙版弹窗
  dialogVisible.value=false;
  if(taboo.value.name.trim()==''){ElMessage.error('请输入禁忌词名称!');return;}
  if(taboo.value.categoryId==''){ElMessage.error('请选择禁忌词类别!');return;}
  let data=qs.stringify(taboo.value);
  axios.post(BASE_URL+'/taboowords/add-new',data)
      .then((response)=>{
        if (response.data.code==2001){
          ElMessage.success(taboo.value.id==null?'新增成功!':'修改成功!');

          router.push('/taboowords');
          //重新记载禁忌词数组
          loadData();
          taboo.value={name:'',categoryId:'',systemLevel:'1',categoryName:''};
        }else {
          ElMessage.error(response.data.msg)
        }
      })

}



//前端分页器
  // @size-change页码展示数量点击事件
const handleSizeChange =(val)=> {
    // 更新每页展示数据size
  pageSize.value = val;
  }
  // @current-change页码点击事件
const handleCurrentChange =(val)=> {
  // 更新当前页数是第几页
  currentPage.value = val;
  }

</script>

<style scoped>


</style>